guide/static/donate.html

<h1>Donate</h1>

<p>Okay, the rules: if you donate <i>anything</i>, I'll spend some time working on the site this day (adding content, implementing new features, etc). Of course, I'm planning to be working on the site anyway, donations or not! However, I jump from project to project way too often (and rarely manage to finish anything), so donating money is a good way to make sure that I'd feel obligated to keep working on this one. If I find out that it doesn't work as a motivation, I'll stop accepting donations.</p>

<p>Just in case, 1000 rub. is 14$ (or 12.5€), and you can choose any amount below 15000 rub. I'd put a Paypal button, but Paypal doesn't allow receiving money in Belarus.</p>

(By the way, if you <a href="https://artyom.me/cv">hired me</a>, it'd be even better!)

<div id="wrapper">
  <iframe id="donate-form" frameborder="0" allowtransparency="true" scrolling="no" width="450" height="197" style="display:block;margin:auto;" src="https://money.yandex.ru/embed/shop.xml?account=410011616040682&quickpay=shop&payment-type-choice=on&mobile-payment-type-choice=on&writer=seller&targets=Haskell+guide&targets-hint=&default-sum=1000&button-text=04&successURL="></iframe>
  <div id="loader">
    <div id="floatingCirclesG">
      <div class="f_circleG" id="frotateG_01"></div>
      <div class="f_circleG" id="frotateG_02"></div>
      <div class="f_circleG" id="frotateG_03"></div>
      <div class="f_circleG" id="frotateG_04"></div>
      <div class="f_circleG" id="frotateG_05"></div>
      <div class="f_circleG" id="frotateG_06"></div>
      <div class="f_circleG" id="frotateG_07"></div>
      <div class="f_circleG" id="frotateG_08"></div>
    </div>
  </div>
</div>

<style>
#wrapper {
  position: relative;
  margin: auto;
  margin-top: 3em;
  width: 450px;
  height: 197px; }

#donate-form {
  position: relative;
  z-index: 100; }

#loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: -100; }

/* from http://cssload.net/en/spinners */

#floatingCirclesG{
  position:relative;
  width:125px;
  height:125px;
  margin:auto;
  transform:scale(0.6);
    -o-transform:scale(0.6);
    -ms-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    -moz-transform:scale(0.6);
}

.f_circleG{
  position:absolute;
  background-color:rgb(255,255,255);
  height:22px;
  width:22px;
  border-radius:12px;
    -o-border-radius:12px;
    -ms-border-radius:12px;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
  animation-name:f_fadeG;
    -o-animation-name:f_fadeG;
    -ms-animation-name:f_fadeG;
    -webkit-animation-name:f_fadeG;
    -moz-animation-name:f_fadeG;
  animation-duration:1.2s;
    -o-animation-duration:1.2s;
    -ms-animation-duration:1.2s;
    -webkit-animation-duration:1.2s;
    -moz-animation-duration:1.2s;
  animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
  animation-direction:normal;
    -o-animation-direction:normal;
    -ms-animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
}

#frotateG_01{
  left:0;
  top:51px;
  animation-delay:0.45s;
    -o-animation-delay:0.45s;
    -ms-animation-delay:0.45s;
    -webkit-animation-delay:0.45s;
    -moz-animation-delay:0.45s;
}

#frotateG_02{
  left:15px;
  top:15px;
  animation-delay:0.6s;
    -o-animation-delay:0.6s;
    -ms-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
}

#frotateG_03{
  left:51px;
  top:0;
  animation-delay:0.75s;
    -o-animation-delay:0.75s;
    -ms-animation-delay:0.75s;
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
}

#frotateG_04{
  right:15px;
  top:15px;
  animation-delay:0.9s;
    -o-animation-delay:0.9s;
    -ms-animation-delay:0.9s;
    -webkit-animation-delay:0.9s;
    -moz-animation-delay:0.9s;
}

#frotateG_05{
  right:0;
  top:51px;
  animation-delay:1.05s;
    -o-animation-delay:1.05s;
    -ms-animation-delay:1.05s;
    -webkit-animation-delay:1.05s;
    -moz-animation-delay:1.05s;
}

#frotateG_06{
  right:15px;
  bottom:15px;
  animation-delay:1.2s;
    -o-animation-delay:1.2s;
    -ms-animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
}

#frotateG_07{
  left:51px;
  bottom:0;
  animation-delay:1.35s;
    -o-animation-delay:1.35s;
    -ms-animation-delay:1.35s;
    -webkit-animation-delay:1.35s;
    -moz-animation-delay:1.35s;
}

#frotateG_08{
  left:15px;
  bottom:15px;
  animation-delay:1.5s;
    -o-animation-delay:1.5s;
    -ms-animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
}

@keyframes f_fadeG{
  0%{
    background-color:rgb(0,0,0);
  }

  100%{
    background-color:rgb(255,255,255);
  }
}

@-o-keyframes f_fadeG{
  0%{
    background-color:rgb(0,0,0);
  }

  100%{
    background-color:rgb(255,255,255);
  }
}

@-ms-keyframes f_fadeG{
  0%{
    background-color:rgb(0,0,0);
  }

  100%{
    background-color:rgb(255,255,255);
  }
}

@-webkit-keyframes f_fadeG{
  0%{
    background-color:rgb(0,0,0);
  }

  100%{
    background-color:rgb(255,255,255);
  }
}

@-moz-keyframes f_fadeG{
  0%{
    background-color:rgb(0,0,0);
  }

  100%{
    background-color:rgb(255,255,255);
  }
}
</style>