Your IP : 216.73.216.76
<?
$description = "Wchodzisz na własną odpowiedzialność. Nie odpowiadam za straty na psychice. Nie, NyanCat tutaj nie lata- masz halucyjnacje z niedożywienia.";
$title = "Kamil Rogala- Front End Developer. Poligon, eksperymenty i zło wszelakie";
$keywords = ",poligon,eksperymenty";
$random = rand(0,5);
?>
<!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>
<!--[if lt IE 9]>
<script src="<? echo $_SERVER['SCRIPT_URI']; ?>/html5.js"></script>
<![endif]-->
<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|Roboto+Mono" rel="stylesheet">
<link href="<? echo $_SERVER['SCRIPT_URI']; ?>css/template.min.css" rel="stylesheet" type="text/css" />
<? if($random >0){ ?>
<link href="<? echo $_SERVER['SCRIPT_URI']; ?>css/special.css" rel="stylesheet" type="text/css" />
<? } ?>
</head>
<body class="poligon anim <? if($random == 2){echo 'rainbow';}?>">
<div class="lbox"><div class="loader"></div></div>
<div class="glass anim"></div>
<header class="anim header">
<div class="wrapper">
<a title="<? echo $title; ?>" href="/">
<h1 class="anim"><span class="a-l-0">Poligon</span><span class="a-l-3">.</span><span class="a-l-1">Kamil</span><span class="a-l-2">Rogala</span><span class="a-l-3">.</span><span class="a-l-4">IT</span></h1>
</a>
<button class="menu menu-trigger anim"><span>Włącz menu</span></button>
<nav class="menu menu-container anim">
<header class="hide"><h3>Menu</h3></header>
<ul class="absoluter">
<li><a href="http://kamilrogala.it" title="Blog poświęcony frontendowi" target="_blank">Mój blog</a></li>
<li><a href="http://kamilrogala.it/o-mnie" title="O mnie" target="_blank">O mnie</a></li>
<li><a href="http://kamilrogala.it/kontakt" title="Kontakt" target="_blank">Kontakt</a></li>
</ul>
</nav>
</div>
</header>
<aside>
<div class="wrapper">
<article class="top-content-module">
<header><h3>Witaj na poligonie!</h3></header>
<p>Na tej stronie znajdziesz moje eksperymenty i ciekawe projekty. Niektóre są ukończone, inne w powijakach, a część z nich dopiero jest w fazie planu</p>
<p>Każdy z tych projektów jest moim autorskim dziełem i każdy z nich ma otwarty kod źródłowy- wystarczy spojrzeć w źródło strony.</p>
<p>Konstrukcja każdego z projektów jest banalnie prosta:
<ul>
<li>/css/
<ul>
<li>template.css</li>
</ul>
</li>
<li>/images/</li>
<li>index.php</li>
<li>opis.txt</li>
<li>opcjonalnie: base.json</li>
</ul>
</p>
<p>W pliku index.php znajduje się kod HTML5 oraz JavaScript. Ten drugi znajduje się zawsze na końcu i staram się opatrzyć go komentarzami. Plik 'opis.txt' to opis pomysłu, plany na następną wersję itp. W niektórych projektach może pojawić się plik base.json</p>
<p>W projektach tych nie przeprowadzam minifikacji kodu, by łatwiej było go analizować- projekty te slużą mi za ściągawkę, ale mają być głównie ściągawką dla innych. Wyjątkiem jest ta strona, gdzie kod CSS jest zminifikowany</p>
<p>Korzystajcie śmiało- w razie problemów ze zrozumieniem kodu, krytyką lub propozycjami <a href="http://kamilrogala.it/kontakt" title="Kontakt ze mną" target="_blank">piszcie</a>.</p>
</article>
</div>
</aside>
<main>
<div class="wrapper">
<header class="hide"><h2>Spis projektów</h2></header>
<section class="all-projects-container flex-container">
<header><h3>Lista moich eksperymentów</h3></header>
<article class="simple-project-container">
<header><h4>Easter Chicken</h4></header>
<div class="project-technologies">
<h5>Użyte technologie</h5>
<p>HTML, CSS</p>
</div>
<div class="project-description">
<p>Animacja pękającego jajka z ruszającym się kurczakiem.<br/>Całość jest stworzona z pomocą samego HTML i CSS. Zrobione dla frajdy oraz celem pokazania możliwości animacji.</p>
<p>Kod CSS jest nieoczyszczony, rozpisany na jak najmniejsze cząstki by było łatwiej zrozumieć zasady animacji początkującemu. Zero grupowania selektorów i optymalizacji kodu</p>
</div>
<div class="process-bar-container">
<h5>Proces prac</h5>
<div class="process-bar-background">
<div process="100" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="project-link">
<a href="/projekty/easter-chicken" title="projekt">przejdź do tego projektu</a>
<a class="codepen" href="http://codepen.io/KamilRogala/pen/mWavWQ" title="projekt" target="_blank">przejdź do Codepen</a>
</div>
</article>
<article class="simple-project-container">
<header><h4>Xmas reindeer</h4></header>
<div class="project-technologies">
<h5>Użyte technologie</h5>
<p>HTML, CSS</p>
</div>
<div class="project-description">
<p>Czerwononosy renifer Rudolf narysowany wyłącznie z użyciem HTML i CSS</p>
<p>Podobnie jak animacja wielkanocnego jajka i kurczaka- kod CSS jest rozpisany na jak najmniejsze cząstki by było łatwiej zrozumieć konstrukcję początkującemu. Grupowane są jedynie pojedyncze selektory, a sam kod nie jest zoptymalizowany.</p>
</div>
<div class="process-bar-container">
<h5>Proces prac</h5>
<div class="process-bar-background">
<div process="100" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="project-link">
<a href="/projekty/xmas-reindeer" title="projekt">przejdź do tego projektu</a>
<a class="codepen" href="http://codepen.io/KamilRogala/pen/LWMaPM" title="projekt" target="_blank">przejdź do Codepen</a>
</div>
</article>
<?/*
<article class="simple-project-container">
<header><h4>Pasek postępu</h4></header>
<div class="project-technologies">
<h5>Użyte technologie</h5>
<p>HTML, CSS, jQuery, JavaScript</p>
</div>
<div class="project-description">
<p>Podobają Ci się paski postępu prac na tej stronie?</p>
<p>No to udostępniam Ci kod jak to zrobić i to w dwóch wersjach- z użyciem biblioteki jQuery oraz z użyciem natywnego JavaScript</p>
<p>Sam postęp modyfikujemy za pomocą edycji wartości atrybutu <i>process</i> dla <i>div.process-bar</i>. Wartość ta jest pobierana przez kod JavaScript, a następnie podstawiana jako długość paska. Kolorowanie odbywa się z pomocą dodawania klas do <i>div.process-bar</i>. Prócz tego kod wyszukuje najbliższy element <i>div.process-value-container</i> i umieszcza w nim wartość wraz z procentem.</p>
</div>
<div class="process-bar-container">
<h5>Proces prac</h5>
<div class="process-bar-background">
<div process="100" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="project-link">
<a href="/projekty/process-bar-javascript" title="projekt">przejdź do tego projektu (JS)</a>
<a href="/projekty/process-bar-jquery" title="projekt">przejdź do tego projektu (jQuery)</a>
<a class="codepen" href="http://codepen.io/KamilRogala/pen/mWavWQ" title="projekt" target="_blank">przejdź do Codepen (JS)</a>
<a class="codepen" href="http://codepen.io/KamilRogala/pen/mWavWQ" title="projekt" target="_blank">przejdź do Codepen (jQuery)</a>
</div>
</article>
*/?>
<?/*
<article class="simple-project-container">
<header><h4>Absolute positioner</h4></header>
<div class="project-technologies">
<h5>Użyte technologie</h5>
<p>HTML, CSS, jQuery, JavaScript</p>
</div>
<div class="project-description">
<p>Bardzo prosty sposob na pozycjonowanie idealnie w poziomie i pionie elementu z użyciem jednej klasy i to w dwoch wersjach- z użyciem biblioteki jQuery oraz z użyciem natywnego JavaScript</p>
</div>
<div class="process-bar-container">
<h5>Proces prac</h5>
<div class="process-bar-background">
<div process="100" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="project-link">
<a href="/projekty/absolute-positioner-jquery" title="projekt">przejdź do tego projektu (JS)</a>
<a href="/projekty/absolute-positioner-jquery" title="projekt">przejdź do tego projektu (jQuery)</a>
<a class="codepen" href="http://codepen.io/KamilRogala/pen/mWavWQ" title="projekt" target="_blank">przejdź do Codepen (JS)</a>
<a class="codepen" href="http://codepen.io/KamilRogala/pen/mWavWQ" title="projekt" target="_blank">przejdź do Codepen (jQuery)</a>
</div>
</article>
*/?>
<article class="simple-project-container">
<header><h4>Battle Slider</h4></header>
<div class="project-technologies">
<h5>Użyte technologie</h5>
<p>HTML, CSS, Javascript</p>
</div>
<div class="project-description">
<p>Projekt mini-gry gdzie o sile ataku decyduje pionowy slider zwiększający i zmniejszający swą wysokość. Po kliknięciu slider ma się zatrzymać na ustalonej pozycji i na podstawie pozycji wyliczyć punkty ataku. Im wyższy slider tym większy atak.</p>
</div>
<div class="process-bar-container">
<h5>Proces prac</h5>
<div class="process-bar-background">
<div process="0" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="project-link">
<a href="/projekty/battle-slider" title="projekt">przejdź do tego projektu</a>
</div>
</article>
<article class="simple-project-container">
<header><h4>Gun Sight</h4></header>
<div class="project-technologies">
<h5>Użyte technologie</h5>
<p>HTML, CSS, Javascript</p>
</div>
<div class="project-description">
<p>Projekt mini-gry ze strzelaniem do celu. Dwa slidery (poziomy i pionowy) zwiększające i zmniejszające swe wymiary. Po kliknięciu na dany slider ma on się zatrzymać na ustalonej pozycji. Dwa slidery dają współrzędne strzału.</p>
</div>
<div class="process-bar-container">
<h5>Proces prac</h5>
<div class="process-bar-background">
<div process="0" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="project-link">
<a href="/projekty/gun-sight" title="projekt">przejdź do tego projektu</a>
</div>
</article>
<?/*
<article class="simple-project-container">
<header><h4>Monster Eyes</h4></header>
<div class="project-technologies">
<h5>Użyte technologie</h5>
<p>HTML, CSS, Javascript</p>
</div>
<div class="project-description">
<p>Twarz potwora (w tym wypadku wziąłem ufoludka), na której możemy generować oczy. Oczy śledzą ruchy myszki</p>
<p>Muszę pokombinować jeszcze nad wsparciem różnych przeglądarek, ale to niski priorytet</p>
</div>
<div class="process-bar-container">
<h5>Proces prac</h5>
<div class="process-bar-background">
<div process="90" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="project-link">
<a href="/projekty/monster-eyes" title="projekt">przejdź do tego projektu</a>
<a class="codepen" href="http://codepen.io/KamilRogala/pen/mWavWQ" title="projekt" target="_blank">przejdź do Codepen</a>
</div>
</article>
*/?>
<article class="simple-project-container">
<header><h4>Simple quiz</h4></header>
<div class="project-technologies">
<h5>Użyte technologie</h5>
<p>HTML, CSS, Javascript, JSON, Ajax, PHP, MySQL</p>
</div>
<div class="project-description">
<p>Projekt mini-gry polegającej na rozwiązaniu quizu. W przyszlości planowane jest rozwinięcie tego w większy projekt z konytami uzytkownikow, własnymi quizami itp.</p>
</div>
<div class="process-bar-container">
<h5>Proces prac</h5>
<div class="process-bar-background">
<div process="0" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="project-link">
<a href="/projekty/simple-quiz" title="projekt">przejdź do tego projektu</a>
</div>
</article>
<article class="simple-project-container">
<header><h4>Simple sticky notes</h4></header>
<div class="project-technologies">
<h5>Użyte technologie</h5>
<p>HTML, CSS, Javascript, JSON, Ajax</p>
</div>
<div class="project-description">
<p>Generowanie karteczek z przypomnieniami, listą rzeczy do zrobienia, notatkami itd.</p>
</div>
<div class="process-bar-container">
<h5>Proces prac</h5>
<div class="process-bar-background">
<div process="0" class="process-bar"></div>
<div class="process-value-container"></div>
</div>
</div>
<div class="project-link">
<a href="/projekty/simple-sticky-notes" title="projekt">przejdź do tego projektu</a>
</div>
</article>
</section>
</div>
</main>
<aside class="additional-info">
<div class="wrapper">
<h6>Potrzebujesz pomocy lub porady?</h6>
<p>Jeśli któryś mój projekt Cię zaciekawił to śmiało sprawdź źródło strony- prawdopodobnie znajdziesz tam odpowiedź na to jak działa mój kod. Jeśli się na tym nie znasz, coś jest niejasne, lub masz propozycję innego rozwiązania- możemy porozmawiać!</p>
<p>Masz jakiś pomysł, ale nie wiesz jak go zrealizować? Może w dwójkę znajdziemy rozwiązanie?</p>
<p>Chcesz coś skrytykować w moim kodzie, wskazać mi właściwe rozwiązanie? Nie jestem nieomylny i z chęcią się uczę, więc nie obawiaj się zwrócić mi uwagi czy przeprowadzić <em>code review</em> mojego projektu.</p>
<p>Tak czy owak- <a href="http://kamilrogala.it/kontakt" title="Kontakt ze mną" target="_blank">napisz do mnie</a>!</p>
</div>
</aside>
<? if($random == 4){
echo '<div class="duck"><img src="/images/duck.gif" alt=""/></div>';
}?>
<footer class="anim author">
<div class="wrapper">
<header class="hide"><h3>Autor</h3></header>
<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>
</footer>
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('.loader').fadeOut();
$('.lbox').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
});
})(jQuery);
jQuery(document).ready(function() {
jQuery(function () {
setTimeout(function(){
jQuery("h1,body").addClass("timeout");
}, 1500);
var scrollDiv = document.createElement("div");
jQuery(scrollDiv).attr("id", "toTop").html("powrót na górę").appendTo("body");
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 0) {
jQuery("#toTop").fadeIn();
jQuery("body").addClass("sticky");
} else {
jQuery("#toTop").fadeOut()
jQuery("body").removeClass("sticky");
}
});
jQuery("#toTop").click(function () {
jQuery("body,html").animate({
scrollTop: 0
},
800);
});
});
jQuery(".absoluter").each(function(){
var elh = (jQuery(this).height())/2;
jQuery(this).css({"margin-top": -(jQuery(this).height())/2})
});
jQuery(".process-bar").each(function(){
var value = jQuery(this).attr('process');
var process_class;
if(value < 15){
process_class = "red";
}else if(value < 30){
process_class = "orange";
}else if(value < 60){
process_class = "yellow";
}else if(value < 85){
process_class = "lightgreen";
}
else{
process_class = "green";
}
jQuery(this).css({"width":value+'%'}).addClass(process_class);
var parent = jQuery(this).parent('.process-bar-background');
jQuery(parent).find('.process-value-container').html(value+'%').addClass(process_class);
});
jQuery(".menu-trigger,.menu-container a,.glass").click(function(){
jQuery(".menu-trigger,.menu-container,.glass").toggleClass("active");
jQuery("body").toggleClass("menu-active");
});
<? if($random == 1){ ?>
setTimeout(function() {
jQuery('body').addClass('invert');
}, 3000);
<? } ?>
});
</script>
<? if($random == 3){
echo '<div class="nyan"><img src="/images/nyan.png" alt=""/></div>';
}else if($random == 5){
echo '<div class="fame"><img src="/images/fejm.png" alt=""/></div>';
} ?>
</body>
</html>