Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<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;
}
*::-moz-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;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-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;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-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 x
public
Bin info
anonymouspro
0viewers