<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrap clearfix">
<h1 class="title">DOWNLOAD FROM <a href="http://2ch.hk">2CH.HK</a></h1>
<form action="index.html" method="post">
<div class="url_input_wrap">
<input name="url" class="url_input" type="text" autofocus placeholder="Input thread link"/>
</div>
<div class="menu_wrap">
<div class="clearfix">
<div class="checkbox">
<input name="webm" id="webm_checkbox_input" type="checkbox" checked/>
<label for="webm_checkbox_input">WEBM </label>
</div>
<div class="checkbox">
<input name="img" id="img_checkbox_input" type="checkbox" checked/>
<label for="img_checkbox_input"> IMAGE</label>
</div>
</div>
</div>
</form>
<div class="logo_wrap">
<img class="logo" src="http://i.imgur.com/nWWECFq.png" alt="" />
</div>
</div>
</body>
</html>
@import 'https://fonts.googleapis.com/css?family=Dosis';
h1, p, body, input{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
background-color: white;
font-size: 100%;
padding-top: 10%;
box-sizing: padding-box;
}
a{
color: black;
}
.menu_wrap {
margin-top: 2%;
text-align: center;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
*::selection {
background: #FF6600;
color: white;
}
*::selection {
background: #FF6600;
color: white;
}
.wrap{
width: 70%;
margin: 0 auto;
padding: 0 5%;
text-align: center;
}
.title{
margin-bottom: 70px;
font-size: 3.5em;
font-family: 'Dosis', sans-serif;
font-weight: normal;
color: #404040;
}
.title a{
color: #FF6600;
}
.url_input:focus{
box-shadow: 0px 9px 9px -8px black;
}
.url_input{
box-shadow: 0px 9px 9px -11.5px black;
width: 100%;
height: 50px;
margin-bottom: 10px;
border: none;
border-bottom: 2px solid grey;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
color: grey;
}
.checkbox{
display: inline;
font-size: 2em;
}
.checkbox:not(:first-child){
margin-left: 5%;
}
label{
cursor: pointer;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
}
#webm_checkbox_input{
display: none;
}
#webm_checkbox_input:checked + label:before{
content: "\2611";
color: #FF6600;
line-height: 1px;
}
#webm_checkbox_input:checked + label{
color: #FF6600;
}
#webm_checkbox_input:not(:checked) + label:before{
content: "\2612";
color: grey;
line-height: 1px;
}
#webm_checkbox_input:not(:checked) + label{
color: grey;
}
#img_checkbox_input{
display: none;
}
#img_checkbox_input:checked + label:before{
content: "\2611";
color: #FF6600;
line-height: 1px;
}
#img_checkbox_input:checked + label{
color: #FF6600;
}
#img_checkbox_input:not(:checked) + label:before{
content: "\2612";
color: grey;
line-height: 1px;
}
#img_checkbox_input:not(:checked) + label{
color: grey
}
.logo{
width: 100%;
background-color: #FF6600;
background: linear-gradient(to top, #FF6600 0%, grey 0%);
cursor: pointer;
}
.logo_wrap{
position: relative;
width: 200px;
margin: 10% auto;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
}
function Logo(elem) {
var self = this;
this.fill = function() {
var i = 0;
this.createDownloadEmit();;
(function filling() {
if (i == 100) {
self.removeDownloadEmit();
return;
};
setTimeout(function() {
i++;
$(elem).css('background', 'linear-gradient(to top, #FF6600 ' + i + '%, grey 0%)')
filling()
}, 60);
})()
}
this.createDownloadEmit = function() {
downloadEmit = $('<div style="position:absolute;left: 0;top:0;border: 1px solid black;padding: 3px;">Имитация обработки файлов на сервере</div>').appendTo('body')
}
this.removeDownloadEmit = function() {
if (downloadEmit) downloadEmit.remove();
}
}
var logoElem = $('.logo')
var logo = new Logo(logoElem)
var form = $('form').submit(function(e) {
e.preventDefault();
logo.fill();
})
logoElem.click(function() {
form.submit()
})
Output
This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account
Dismiss xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |