Your IP : 216.73.217.62
<?
$description = "Wchodzisz na własną odpowiedzialność. Nie odpowiadam za straty na psychice.";
$title = "Kamil Rogala- Front End Developer. Poligon, eksperymenty i zło wszelakie";
$keywords = ",poligon,eksperymenty"
?>
<!DOCTYPE html>
<html lang="pl" dir="ltr">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:type" content="article">
<meta property="og:url" content="<? echo $_SERVER['SCRIPT_URI']; ?>">
<meta property="og:title" content="<? echo $title ?>">
<meta property="og:image" content="http://poligon.kamilrogala.it/images/fb_logo_big.jpg">
<meta property="og:description" content="<? echo $description?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="<? echo $_SERVER['SCRIPT_URI']; ?>">
<meta charset="utf-8">
<meta name="keywords" content="Kamil Rogala,programowanie,strony internetowe,WWW,frontend,frontend developer,HTML,HTML5,CSS,CSS3,javascript,jQuery,responsive web design,RWD,webdeveloper<? echo $keywords ?>">
<meta name="rights" content="Kamil Rogala, kamil@kamilrogala.it">
<meta name="description" content="<? echo $description ?>" />
<title><? echo $title ?></title>
<link rel="shortcut icon" href="http://poligon.kamilrogala.it/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://poligon.kamilrogala.it/images/favicon.ico" type="image/x-icon">
<style>
.lbox{position:relative;transition:all .2s ease;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:999999999;}
.loader:before{content:"";position:absolute;top:0px;left:-25px;height:12px;width:12px;border-radius:12px;-webkit-animation:loader10g 3s ease-in-out infinite;animation:loader10g 3s ease-in-out infinite;}
.loader{position:fixed;z-index:9999999999;width:12px;height:12px;left:50%;top:50%;margin-top:-6px;margin-left:-6px;border-radius:12px;-webkit-animation:loader10m 3s ease-in-out infinite;animation:loader10m 3s ease-in-out infinite;}
.loader:after{content:"";position:absolute;top:0px;left:25px;height:10px;width:10px;border-radius:10px;-webkit-animation:loader10d 3s ease-in-out infinite;animation:loader10d 3s ease-in-out infinite;}
@-webkit-keyframes loader10g{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,1);}50%{background-color:rgba(255,255,255,.2);}75%{background-color:rgba(255,255,255,.2);}100%{background-color:rgba(255,255,255,.2);}}
@keyframes loader10g{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,1);}50%{background-color:rgba(255,255,255,.2);}75%{background-color:rgba(255,255,255,.2);}100%{background-color:rgba(255,255,255,.2);}}
@-webkit-keyframes loader10m{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,.2);}50%{background-color:rgba(255,255,255,1);}75%{background-color:rgba(255,255,255,.2);}100%{background-color:rgba(255,255,255,.2);}}
@keyframes loader10m{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,.2);}50%{background-color:rgba(255,255,255,1);}75%{background-color:rgba(255,255,255,.2);}100%{background-color:rgba(255,255,255,.2);}}
@-webkit-keyframes loader10d{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,.2);}50%{background-color:rgba(255,255,255,.2);}75%{background-color:rgba(255,255,255,1);}100%{background-color:rgba(255,255,255,.2);}}
@keyframes loader10d{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,.2);}50%{background-color:rgba(255,255,255,.2);}75%{background-color:rgba(255,255,255,1);}100%{background-color:rgba(255,255,255,.2);}}
</style>
<script src="https://code.jquery.com/jquery-2.0.0.min.js" integrity="sha256-1IKHGl6UjLSIT6CXLqmKgavKBXtr0/jJlaGMEkh+dhw=" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<link href="<? echo $_SERVER['SCRIPT_URI']; ?>css/template.css" rel="stylesheet" type="text/css">
</head>
<body class="demo <? echo 'browser-'.$browser?>">
<div class="lbox"><div class="loader"></div></div>
<div class="width">
<div class="process-bar-container">
<div class="process-bar-background">
<div process="100" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-background">
<div process="90" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-background">
<div process="80" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-background">
<div process="70" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-background">
<div process="60" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-background">
<div process="50" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-background">
<div process="40" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-background">
<div process="30" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-background">
<div process="20" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-background">
<div process="10" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-background">
<div process="0" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
</div>
</div>
<div class="anim author">
<p>© <a href="kamilrogala.it" target="_self" title="Kamil Rogala- Front End Developer. Strona poświęcona programowaniu, front end'owi i szeroko rozumianemu tworzeniu stron internetowych">KamilRogala.IT</a></p>
<p>autor: Kamil Rogala, 2017-<? echo date('Y');?>.</p>
</div>
<script>
(function($) {
$(window).load(function() {
$('.loader').fadeOut();
$('.lbox').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
});
})(jQuery);
//tworzymy zmienne
//wyciagamy wszystkie paski
var process_bars = document.querySelectorAll(".process-bar");
//zliczamy ilosc paskow
var process_bars_amount = process_bars.length;
//tworzymy petle ktora wykonuje sie tyle razy ile jest paskow
for (var i = 0, process_bars_amount; i < process_bars_amount; i++) {
//za kazdym razem wywolujemy funkcje dla danego paska
generating_process_bars(process_bars[i]);
}
//tworzymy funkcje
function generating_process_bars(i){
//pobieramy wartosc atrybutu 'proces'
process_amount = i.getAttribute('process');
//na podstawie wartosci dobieramy klase, ktora pokaze nam kolory
if(process_amount < 15){
process_class = 'red';
}else if(process_amount < 30){
process_class = 'orange';
}else if(process_amount < 60){
process_class = 'yellow';
}else if(process_amount < 85){
process_class = 'lightgreen';
}else{
process_class = 'green';
}
//dodajemy klase do paska
i.className += ' ' + process_class;
//dodajemy dlugosc paska
i.style.width = process_amount + '%';
//szukamy rodzica danego paska
bar_parent = i.parentElement;
//wyszukujemy kontener na wypisanie wartosci
bar_text = bar_parent.getElementsByClassName('process-value-container')[0];
//wpisujemy wartosc
bar_text.innerHTML = process_amount+'%';
//dodajemy klase
bar_text.className += ' ' + process_class;
};
</script>
</body>
</html>