Supro UI

by levchenko_d

HTML

<div class="content">
    
<h1 class="__center">Supro UI</h1>

    
<h6 class="__center">atomoj</h6>

    <div class="_block">
         <h2 class="_header">Headings</h2>

         <h1>Head 1</h1>

         <h2>Head 2</h2>

         <h3>Head 3</h3>

         <h4>Head 4</h4>

         <h5>Head 5</h5>

         <h6>Head 6</h6> 
    </div>
    <div class="_block">
         <h2 class="_header">Paragraph</h2>

        <p>Al vi mi skribas — kio plia necesus por la sent-esprim'? Nun povas vi laŭ volo via ignori min kun malestim', sed al plorinda sorto mia havante guton da kompat', vi min ne lasos en malŝat'. Komence volis mi silenti, kaj kredu, ke pri mia hont' ne scius vi eĉ en estont', se povus mi esperon senti ke mi vin vidos — iam ajn, eĉ unufoje dum semajn', por aŭdi vian voĉon, diri replike vorton, kaj dum tag' kaj nokto, ĉiam en imag' renkonton novan prisopiri. Sed vi enuas en soci', vilaĝo tedas vin kutime, kaj ni… ne brilas tute ni, eĉ se vin ŝatas simplanime.</p>
    </div>
    <div class="_block">
         <h2 class="_header">Links</h2>
 <a href="javascript:;">Linky</a>
 <a href="javascript:;">Linky</a>
 <a href="javascript:;">Linky</a>
 <a href="javascript:;">Linky</a>

    </div>
    <div class="_block">
        <div class="_group">
             <h2 class="_header">Text Inputs</h2>

            <p>Small - "__s"</p>
            <input class="__s" placeholder="Text" />
            <input class="__s" placeholder="Text" />
            <input class="__s" placeholder="Text" />
            <input class="__s" placeholder="Text" />
            <input class="__s" placeholder="Text" />
            <input class="__s" placeholder="Text" />
        </div>
        <br>
        <div class="_group">
            <p>Medium - "__m"</p>
            <input class="__m" placeholder="Text" />
            <input class="__m" placeholder="Text" />
        </div>
        <br>
        <p>Large - "__l"</p>
        <input class="__l" placeholder="Text" />
        <br>
        <div>
       ...

CSS

body {
    background: #f2f2f2;
    font-family: PT Sans;
    color: rgb(9, 32, 53);
}
/*HEADER*/
 ._header {
    border-bottom: solid 1px #f2f2f2;
    padding-bottom: 10px;
    margin: 0;
}
h4, h5, h6 {
    text-transform: uppercase;
}
/*PARAGRAPH*/
 p {
    font-family: Open Sans;
    font-size: 10pt;
    line-height: 13pt;
    letter-spacing: 0.2pt;
    font-weight: 400;
}
/*LINKS*/
 a {
    text-decoration: none;
    outline: none;
    color: rgb(33, 145, 202);
}
a:hover {
    color: rgb(48, 177, 242);
}
a:focus {
    text-decoration: underline;
}
a:active {
    color: rgb(33, 145, 202);
}
/*BLOCK*/
 ._block {
    background: #FFFFFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 10px;
}
/*INPUT*/
 input {
    display: block;
    padding: 10px;
    border: none;
    background: #e8e8e8;
    margin: 5px 5px 5px 0;
    height: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    outline: none;
    max-width: 100%;
}
input:first-of-type {
    margin-left:0;
}
input:focus {
    background: #eeeeee;
}
._group input {
    display: inline-block;
}
.__s {
    width: 50px;
}
.__m {
    width: 210px;
}
.__l {
    width: 290px;
}
.__h {
    width: 450px;
}
.__center {
    text-align: center;
}
/*NOTIFICATIONS*/
 ._notification {
    position: fixed;
    top: 10px;
    width: 250px;
    background: #556472;
    border-radius: 10px;
    color: white;
    left: 0;
    right: 0;
    margin: 20px auto;
    -webkit-transition: 0.2s ease-out;
    opacity: 0;
    -webkit-transform: translateY(20px);
    overflow: hidden;
}
._notification.__shown {
    opacity: 0.99;
    -webkit-transform: translateY(0px);
}
._notification.__shown:hover {
    opacity: 1;
}
._notification.__hidden, ._notification.__hidden:hover {
    opacity: 0;
    -webkit-transform: translateY(20px);
}
._notification ._title {
    font-family: PT sans;
    font-weight: 500;
    letter-spacing:...

JavaScript

function isFn(variable) {
    var getType = {};
    return variable && getType.toString.call(variable) === '[object Function]';
}

var Counter = function (sec, countdown, callback) {
    sec = parseInt(sec);
    
    var span = document.createElement('span'),
        cd = countdown || false,
        i = cd ? sec : 0;
    span.className = "_timer";
    span.innerHTML = cd ? '(' + sec + ')' : '(0)';

    function oneMoreSec() {
        setTimeout(function () {
            i = cd ? i - 1 : i + 1;
            span.innerHTML = '(' + i + ')';
            if (cd && i != 0 || !cd && i != sec) {
                oneMoreSec();
            } else {
                if (isFn(callback)) {
                    callback();
                }
            }
        }, 1000)
    }

    oneMoreSec();
    return span;

};

var Notification = function (data) {

    var div;

    function createConfirmButtons(action) {
        var wrap = document.createElement('div'),
            yesBtn = document.createElement('button'),
            noBtn = document.createElement('button');

        wrap.className = '_bottom_bar';
        wrap.appendChild(noBtn);
        wrap.appendChild(yesBtn);

        yesBtn.className = 'confirm';
        yesBtn.innerHTML = 'Yes';
        noBtn.innerHTML = 'No';

        yesBtn.onclick = function () {
            if (isFn(action)) {
                action(true);
            }
            hide();
        }

        noBtn.onclick = function () {
            if (isFn(action)) {
                action(false);
            }
            hide();
        }

        return wrap;
    }

    function createPromptInput(action) {
        var wrap = document.createElement('div'),
            input = document.createElement('input'),
            btn = document.createElement('button');

        wrap.className = '_bottom_bar';
        wrap.appendChild(input);
        wrap.appendChild(btn);

        input.name = 'prompt-input';
        input.type = 'text';

        input.onfocus =...