gergelypolonkai-web-jekyll/index.html

535 lines
20 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Symbolon</title>
<style>
div#holder {
overflow: auto;
height: 320px;
}
div.card {
float: left;
margin-right: 1em;
}
p {
text-align: center;
border-bottom: 1px solid black;
}
img {
border: 0 none;
}
</style>
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/fancybox/source/jquery.fancybox.pack.js"></script>
</head>
<body>
<select>
<option value="">Mind / All</option>
<option value="aries">Kos / Aries</option>
<option value="taurus">Bika / Taurus</option>
<option value="gemini">Ikrek / Gemini</option>
<option value="cancer">Rák / Cancer</option>
<option value="leo">Oroszlán / Leo</option>
<option value="virgo">Szűz / Virgo</option>
<option value="libra">Mérleg / Libra</option>
<option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<select>
<option value="">Mind / All</option>
<option value="aries">Kos / Aries</option>
<option value="taurus">Bika / Taurus</option>
<option value="gemini">Ikrek / Gemini</option>
<option value="cancer">Rák / Cancer</option>
<option value="leo">Oroszlán / Leo</option>
<option value="virgo">Szűz / Virgo</option>
<option value="libra">Mérleg / Libra</option>
<option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<button id="draw">Húzz egyet / Draw one</button>
<hr>
<div id="holder">
<div class="card aries">
<a id="card_01" class="fancybox" rel="group" href="images/01.jpg"><img src="images/01.jpg" alt="A Harcos"></a>
<p class="cim">A Harcos</p>
</div>
<div class="card taurus">
<a id="card_02" class="fancybox" rel="group" href="images/02.jpg"><img src="images/02.jpg" alt="A Szerető"></a>
<p class="cim">A Szerető</p>
</div>
<div class="card gemini">
<a id="card_03" class="fancybox" rel="group" href="images/03.jpg"><img src="images/03.jpg" alt="A Közvetítő"></a>
<p class="cim">A Közvetítő</p>
</div>
<div class="card cancer">
<a id="card_04" class="fancybox" rel="group" href="images/04.jpg"><img src="images/04.jpg" alt="Az Anya"></a>
<p class="cim">Az Anya</p>
</div>
<div class="card leo">
<a id="card_05" class="fancybox" rel="group" href="images/05.jpg"><img src="images/05.jpg" alt="Az Egó"></a>
<p class="cim">Az Egó</p>
</div>
<div class="card virgo">
<a id="card_06" class="fancybox" rel="group" href="images/06.jpg"><img src="images/06.jpg" alt="A Szolgáló"></a>
<p class="cim">A Szolgáló</p>
</div>
<div class="card libra">
<a id="card_07" class="fancybox" rel="group" href="images/07.jpg"><img src="images/07.jpg" alt="A Partner"></a>
<p class="cim">A Partner</p>
</div>
<div class="card scorpio">
<a id="card_08" class="fancybox" rel="group" href="images/08.jpg"><img src="images/08.jpg" alt="A Csábító"></a>
<p class="cim">A Csábító</p>
</div>
<div class="card sagittarius">
<a id="card_09" class="fancybox" rel="group" href="images/09.jpg"><img src="images/09.jpg" alt="A Prédikátor"></a>
<p class="cim">A Prédikátor</p>
</div>
<div class="card capricorn">
<a id="card_10" class="fancybox" rel="group" href="images/10.jpg"><img src="images/10.jpg" alt="A Mester"></a>
<p class="cim">A Mester</p>
</div>
<div class="card aquarius">
<a id="card_11" class="fancybox" rel="group" href="images/11.jpg"><img src="images/11.jpg" alt="Az Udvari Bolond"></a>
<p class="cim">Az Udvari Bolond</p>
</div>
<div class="card pisces">
<a id="card_12" class="fancybox" rel="group" href="images/12.jpg"><img src="images/12.jpg" alt="Az Angyal"></a>
<p class="cim">Az Angyal</p>
</div>
<div class="card cancer aries">
<a id="card_13" class="fancybox" rel="group" href="images/13.jpg"><img src="images/13.jpg" alt="A Dac"></a>
<p class="cim">A Dac</p>
</div>
<div class="card cancer taurus">
<a id="card_14" class="fancybox" rel="group" href="images/14.jpg"><img src="images/14.jpg" alt="Éva két arca"></a>
<p class="cim">Éva két arca</p>
</div>
<div class="card cancer gemini">
<a id="card_15" class="fancybox" rel="group" href="images/15.jpg"><img src="images/15.jpg" alt="Kibeszélés"></a>
<p class="cim">Kibeszélés</p>
</div>
<div class="card cancer leo">
<a id="card_16" class="fancybox" rel="group" href="images/16.jpg"><img src="images/16.jpg" alt="Összeférhetetlenség"></a>
<p class="cim">Összeférhetetlenség</p>
</div>
<div class="card cancer virgo">
<a id="card_17" class="fancybox" rel="group" href="images/17.jpg"><img src="images/17.jpg" alt="A Törődés"></a>
<p class="cim">A Törődés</p>
</div>
<div class="card cancer libra">
<a id="card_18" class="fancybox" rel="group" href="images/18.jpg"><img src="images/18.jpg" alt="A Család"></a>
<p class="cim">A Család</p>
</div>
<div class="card cancer scorpio">
<a id="card_19" class="fancybox" rel="group" href="images/19.jpg"><img src="images/19.jpg" alt="Az Elvetélés"></a>
<p class="cim">Az Elvetélés</p>
</div>
<div class="card cancer sagittarius">
<a id="card_20" class="fancybox" rel="group" href="images/20.jpg"><img src="images/20.jpg" alt="Mnemoszüné"></a>
<p class="cim">Mnemoszüné</p>
</div>
<div class="card cancer capricorn">
<a id="card_21" class="fancybox" rel="group" href="images/21.jpg"><img src="images/21.jpg" alt="A Jégkirálynő"></a>
<p class="cim">A Jégkirálynő</p>
</div>
<div class="card cancer aquarius">
<a id="card_22" class="fancybox" rel="group" href="images/22.jpg"><img src="images/22.jpg" alt="A Szabadulás"></a>
<p class="cim">A Szabadulás</p>
</div>
<div class="card cancer pisces">
<a id="card_23" class="fancybox" rel="group" href="images/23.jpg"><img src="images/23.jpg" alt="Csipkerózsika szendergése"></a>
<p class="cim">Csipkerózsika szendergése</p>
</div>
<div class="card leo aries">
<a id="card_24" class="fancybox" rel="group" href="images/24.jpg"><img src="images/24.jpg" alt="A Csata"></a>
<p class="cim">A Csata</p>
</div>
<div class="card leo taurus">
<a id="card_25" class="fancybox" rel="group" href="images/25.jpg"><img src="images/25.jpg" alt="A Királynő"></a>
<p class="cim">A Királynő</p>
</div>
<div class="card leo gemini">
<a id="card_26" class="fancybox" rel="group" href="images/26.jpg"><img src="images/26.jpg" alt="A Színész"></a>
<p class="cim">A Színész</p>
</div>
<div class="card leo virgo">
<a id="card_27" class="fancybox" rel="group" href="images/27.jpg"><img src="images/27.jpg" alt="A Beteg Király"></a>
<p class="cim">A Beteg Király</p>
</div>
<div class="card leo libra">
<a id="card_28" class="fancybox" rel="group" href="images/28.jpg"><img src="images/28.jpg" alt="Az Esküvő"></a>
<p class="cim">Az Esküvő</p>
</div>
<div class="card leo scorpio">
<a id="card_29" class="fancybox" rel="group" href="images/29.jpg"><img src="images/29.jpg" alt="A Mágus"></a>
<p class="cim">A Mágus</p>
</div>
<div class="card leo sagittarius">
<a id="card_30" class="fancybox" rel="group" href="images/30.jpg"><img src="images/30.jpg" alt="Fortuna"></a>
<p class="cim">Fortuna</p>
</div>
<div class="card leo capricorn">
<a id="card_31" class="fancybox" rel="group" href="images/31.jpg"><img src="images/31.jpg" alt="A Teher"></a>
<p class="cim">A Teher</p>
</div>
<div class="card leo aquarius">
<a id="card_32" class="fancybox" rel="group" href="images/32.jpg"><img src="images/32.jpg" alt="A Zuhanás"></a>
<p class="cim">A Zuhanás</p>
</div>
<div class="card leo pisces">
<a id="card_33" class="fancybox" rel="group" href="images/33.jpg"><img src="images/33.jpg" alt="A Visszavonulás"></a>
<p class="cim">A Visszavonulás</p>
</div>
<div class="card aries taurus">
<a id="card_34" class="fancybox" rel="group" href="images/34.jpg"><img src="images/34.jpg" alt="Erosz"></a>
<p class="cim">Erosz</p>
</div>
<div class="card aries gemini">
<a id="card_35" class="fancybox" rel="group" href="images/35.jpg"><img src="images/35.jpg" alt="A Kaloda"></a>
<p class="cim">A Kaloda</p>
</div>
<div class="card ">
<a id="card_36" class="fancybox" rel="group" href="images/36.jpg"><img src="images/36.jpg" alt="Bűnösség"></a>
<p class="cim">Bűnösség</p>
</div>
<div class="card aries libra">
<a id="card_37" class="fancybox" rel="group" href="images/37.jpg"><img src="images/37.jpg" alt="Viszály"></a>
<p class="cim">Viszály</p>
</div>
<div class="card aries scorpio">
<a id="card_38" class="fancybox" rel="group" href="images/38.jpg"><img src="images/38.jpg" alt="A Vámpír"></a>
<p class="cim">A Vámpír</p>
</div>
<div class="card aries sagittarius">
<a id="card_39" class="fancybox" rel="group" href="images/39.jpg"><img src="images/39.jpg" alt="A Keresztes Lovag"></a>
<p class="cim">A Keresztes Lovag</p>
</div>
<div class="card aries capricorn">
<a id="card_40" class="fancybox" rel="group" href="images/40.jpg"><img src="images/40.jpg" alt="A Meghiúsulás"></a>
<p class="cim">A Meghiúsulás</p>
</div>
<div class="card aries aquarius">
<a id="card_41" class="fancybox" rel="group" href="images/41.jpg"><img src="images/41.jpg" alt="A Bajkeverő"></a>
<p class="cim">A Bajkeverő</p>
</div>
<div class="card aries pisces">
<a id="card_42" class="fancybox" rel="group" href="images/42.jpg"><img src="images/42.jpg" alt="A Szent Őrült"></a>
<p class="cim">A Szent Őrült</p>
</div>
<div class="card taurus gemini">
<a id="card_43" class="fancybox" rel="group" href="images/43.jpg"><img src="images/43.jpg" alt="Az Aranyszívű Leány"></a>
<p class="cim">Az Aranyszívű Leány</p>
</div>
<div class="card taurus virgo">
<a id="card_44" class="fancybox" rel="group" href="images/44.jpg"><img src="images/44.jpg" alt="A Ragaszkodás"></a>
<p class="cim">A Ragaszkodás</p>
</div>
<div class="card taurus libra">
<a id="card_45" class="fancybox" rel="group" href="images/45.jpg"><img src="images/45.jpg" alt="Az Aranykalitka"></a>
<p class="cim">Az Aranykalitka</p>
</div>
<div class="card taurus scorpio">
<a id="card_46" class="fancybox" rel="group" href="images/46.jpg"><img src="images/46.jpg" alt="A Bábu"></a>
<p class="cim">A Bábu</p>
</div>
<div class="card taurus sagittarius">
<a id="card_47" class="fancybox" rel="group" href="images/47.jpg"><img src="images/47.jpg" alt="Anyag és Szellem"></a>
<p class="cim">Anyag és Szellem</p>
</div>
<div class="card taurus capricorn">
<a id="card_48" class="fancybox" rel="group" href="images/48.jpg"><img src="images/48.jpg" alt="A Teremtés felelősségérzete"></a>
<p class="cim">A Teremtés felelősségérzete</p>
</div>
<div class="card taurus aquarius">
<a id="card_49" class="fancybox" rel="group" href="images/49.jpg"><img src="images/49.jpg" alt="A Búcsú"></a>
<p class="cim">A Búcsú</p>
</div>
<div class="card taurus pisces">
<a id="card_50" class="fancybox" rel="group" href="images/50.jpg"><img src="images/50.jpg" alt="A Szellem Kertje"></a>
<p class="cim">A Szellem Kertje</p>
</div>
<div class="card gemini virgo">
<a id="card_51" class="fancybox" rel="group" href="images/51.jpg"><img src="images/51.jpg" alt="A Stratéga"></a>
<p class="cim">A Stratéga</p>
</div>
<div class="card gemini libra">
<a id="card_52" class="fancybox" rel="group" href="images/52.jpg"><img src="images/52.jpg" alt="Hiúság Vására"></a>
<p class="cim">Hiúság Vására</p>
</div>
<div class="card gemini scorpio">
<a id="card_53" class="fancybox" rel="group" href="images/53.jpg"><img src="images/53.jpg" alt="A Furulyás"></a>
<p class="cim">A Furulyás</p>
</div>
<div class="card gemini sagittarius">
<a id="card_54" class="fancybox" rel="group" href="images/54.jpg"><img src="images/54.jpg" alt="Mester és Tanítvány"></a>
<p class="cim">Mester és Tanítvány</p>
</div>
<div class="card gemini capricorn">
<a id="card_55" class="fancybox" rel="group" href="images/55.jpg"><img src="images/55.jpg" alt="A Megtörtség"></a>
<p class="cim">A Megtörtség</p>
</div>
<div class="card gemini aquarius">
<a id="card_56" class="fancybox" rel="group" href="images/56.jpg"><img src="images/56.jpg" alt="Az Álmodozó"></a>
<p class="cim">Az Álmodozó</p>
</div>
<div class="card gemini pisces">
<a id="card_57" class="fancybox" rel="group" href="images/57.jpg"><img src="images/57.jpg" alt="A Hallgatás"></a>
<p class="cim">A Hallgatás</p>
</div>
<div class="card virgo libra">
<a id="card_58" class="fancybox" rel="group" href="images/58.jpg"><img src="images/58.jpg" alt="A kapcsolat hétköznapjai"></a>
<p class="cim">A kapcsolat hétköznapjai</p>
</div>
<div class="card virgo scorpio">
<a id="card_59" class="fancybox" rel="group" href="images/59.jpg"><img src="images/59.jpg" alt="Az Önostorozás"></a>
<p class="cim">Az Önostorozás</p>
</div>
<div class="card virgo sagittarius">
<a id="card_60" class="fancybox" rel="group" href="images/60.jpg"><img src="images/60.jpg" alt="Az Inkvizíció"></a>
<p class="cim">Az Inkvizíció</p>
</div>
<div class="card virgo capricorn">
<a id="card_61" class="fancybox" rel="group" href="images/61.jpg"><img src="images/61.jpg" alt="A Félelem"></a>
<p class="cim">A Félelem</p>
</div>
<div class="card virgo aquarius">
<a id="card_62" class="fancybox" rel="group" href="images/62.jpg"><img src="images/62.jpg" alt="A Fúriák"></a>
<p class="cim">A Fúriák</p>
</div>
<div class="card virgo pisces">
<a id="card_63" class="fancybox" rel="group" href="images/63.jpg"><img src="images/63.jpg" alt="A Becsapás"></a>
<p class="cim">A Becsapás</p>
</div>
<div class="card libra scorpio">
<a id="card_64" class="fancybox" rel="group" href="images/64.jpg"><img src="images/64.jpg" alt="A Végzetes Kapcsolat"></a>
<p class="cim">A Végzetes Kapcsolat</p>
</div>
<div class="card libra sagittarius">
<a id="card_65" class="fancybox" rel="group" href="images/65.jpg"><img src="images/65.jpg" alt="A Symbolon"></a>
<p class="cim">A Symbolon</p>
</div>
<div class="card libra capricorn">
<a id="card_66" class="fancybox" rel="group" href="images/66.jpg"><img src="images/66.jpg" alt="A Gyász"></a>
<p class="cim">A Gyász</p>
</div>
<div class="card libra aquarius">
<a id="card_67" class="fancybox" rel="group" href="images/67.jpg"><img src="images/67.jpg" alt="Az Elválás"></a>
<p class="cim">Az Elválás</p>
</div>
<div class="card libra pisces">
<a id="card_68" class="fancybox" rel="group" href="images/68.jpg"><img src="images/68.jpg" alt="A Király Két Gyermeke"></a>
<p class="cim">A Király Két Gyermeke</p>
</div>
<div class="card scorpio sagittarius">
<a id="card_69" class="fancybox" rel="group" href="images/69.jpg"><img src="images/69.jpg" alt="A Fekete Mise"></a>
<p class="cim">A Fekete Mise</p>
</div>
<div class="card scorpio capricorn">
<a id="card_70" class="fancybox" rel="group" href="images/70.jpg"><img src="images/70.jpg" alt="A Depresszió"></a>
<p class="cim">A Depresszió</p>
</div>
<div class="card scorpio aquarius">
<a id="card_71" class="fancybox" rel="group" href="images/71.jpg"><img src="images/71.jpg" alt="A Főnixmadár"></a>
<p class="cim">A Főnixmadár</p>
</div>
<div class="card scorpio pisces">
<a id="card_72" class="fancybox" rel="group" href="images/72.jpg"><img src="images/72.jpg" alt="Az (ál)szent ragyogás"></a>
<p class="cim">Az (ál)szent ragyogás</p>
</div>
<div class="card sagittarius capricorn">
<a id="card_73" class="fancybox" rel="group" href="images/73.jpg"><img src="images/73.jpg" alt="A Gyónás"></a>
<p class="cim">A Gyónás</p>
</div>
<div class="card sagittarius aquarius">
<a id="card_74" class="fancybox" rel="group" href="images/74.jpg"><img src="images/74.jpg" alt="Az óriásugrás"></a>
<p class="cim">Az óriásugrás</p>
</div>
<div class="card sagittarius pisces">
<a id="card_75" class="fancybox" rel="group" href="images/75.jpg"><img src="images/75.jpg" alt="Püthia"></a>
<p class="cim">Püthia</p>
</div>
<div class="card capricorn aquarius">
<a id="card_76" class="fancybox" rel="group" href="images/76.jpg"><img src="images/76.jpg" alt="Rabság"></a>
<p class="cim">Rabság</p>
</div>
<div class="card capricorn pisces">
<a id="card_77" class="fancybox" rel="group" href="images/77.jpg"><img src="images/77.jpg" alt="A Végzet"></a>
<p class="cim">A Végzet</p>
</div>
<div class="card aquarius pisces">
<a id="card_78" class="fancybox" rel="group" href="images/78.jpg"><img src="images/78.jpg" alt="A Grál Kérdése"></a>
<p class="cim">A Grál Kérdése</p>
</div>
</div>
<script>
$('select').change(function () {
var classes = new Array();
var single_card = false;
$('select').each(function (i, e) {
sign = $(e).val();
if (sign != '') {
classes.push($(e).val());
}
});
if (classes.length == 2 && (classes[0] == classes[1])) {
single_card = true;
}
classes = classes.filter(function (e, i, arr) {
return arr.lastIndexOf(e) === i;
});
selector = '';
$.map(classes, function (e) {
selector += '.' + e;
});
if (single_card) {
selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]';
}
console.log(selector);
$('div.card').show();
if (selector != '') {
$('div.card').not(selector).hide();
}
});
function resize_holder() {
var winheight = $(window).height();
var holdertop = $('#holder').position().top;
$('#holder').height(winheight - holdertop - 10);
}
$(document).ready(function () {
resize_holder();
$('.fancybox').fancybox({
beforeShow: function() {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
});
$(window).resize(function () {
resize_holder();
});
$('#draw').click(function () {
count = $('div.card').length;
draw_num = Math.floor(Math.random() * count) + 1;
num_str = (draw_num < 10) ? '0' + draw_num : draw_num;
draw_id = '#card_' + num_str;
console.log(draw_id);
$(draw_id).click();
});
</script>
</body>
</html>