Initial commit
|
@ -0,0 +1 @@
|
||||||
|
bower_components
|
|
@ -0,0 +1,79 @@
|
||||||
|
'use strict';
|
||||||
|
/*global jQuery*/
|
||||||
|
/**
|
||||||
|
* Made by http://linkedin.com/in/karolyi
|
||||||
|
*/
|
||||||
|
(function ($) {
|
||||||
|
var beepThree;
|
||||||
|
var ledTimeoutId;
|
||||||
|
var litLedId = 0;
|
||||||
|
var swingDirection;
|
||||||
|
var maxMenuCount;
|
||||||
|
var actualMenuId = 1;
|
||||||
|
var jqMenuLeds;
|
||||||
|
|
||||||
|
var onClickMenu = function (event) {
|
||||||
|
var jqLiMenuElement = $(this);
|
||||||
|
actualMenuId = parseInt(jqLiMenuElement.data('menuid'), 10);
|
||||||
|
if (beepThree.pause && beepThree.play) {
|
||||||
|
beepThree.pause();
|
||||||
|
beepThree.play();
|
||||||
|
}
|
||||||
|
swingDirection = 'forward';
|
||||||
|
swingLedsToMenu();
|
||||||
|
};
|
||||||
|
|
||||||
|
var swingLedsToMenu = function () {
|
||||||
|
if (ledTimeoutId) {
|
||||||
|
// Clear if there's any running swing
|
||||||
|
clearTimeout(ledTimeoutId);
|
||||||
|
ledTimeoutId = null;
|
||||||
|
}
|
||||||
|
litLedId = 0;
|
||||||
|
lightUpNextLed();
|
||||||
|
};
|
||||||
|
|
||||||
|
var lightUpNextLed = function () {
|
||||||
|
var doNextCycle = false;
|
||||||
|
litLedId += swingDirection === 'forward' ? 1 : -1;
|
||||||
|
if (
|
||||||
|
(actualMenuId === maxMenuCount && litLedId === maxMenuCount) ||
|
||||||
|
(swingDirection == 'backward' && litLedId === actualMenuId)) {
|
||||||
|
doNextCycle = false;
|
||||||
|
} else {
|
||||||
|
doNextCycle = true;
|
||||||
|
}
|
||||||
|
if (swingDirection === 'forward' && litLedId === maxMenuCount && doNextCycle) {
|
||||||
|
swingDirection = 'backward';
|
||||||
|
}
|
||||||
|
jqMenuLeds.removeClass('active');
|
||||||
|
var jqMenuLedToLight = $(jqMenuLeds.get(litLedId - 1));
|
||||||
|
jqMenuLedToLight.addClass('active');
|
||||||
|
if (doNextCycle) {
|
||||||
|
ledTimeoutId = setTimeout(lightUpNextLed, 30);
|
||||||
|
} else {
|
||||||
|
ledTimeoutId = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var onReadyDocument = function () {
|
||||||
|
// Startup functions
|
||||||
|
$('.mainContent').height($(window).height());
|
||||||
|
beepThree = $('#beep-three')[0];
|
||||||
|
$('#menu-chooser li').click(onClickMenu);
|
||||||
|
jqMenuLeds = $('#menu-chooser li .gomb');
|
||||||
|
maxMenuCount = jqMenuLeds.length;
|
||||||
|
};
|
||||||
|
|
||||||
|
// function menuClick(obj){
|
||||||
|
// var src = "images/lampa_animation.gif";
|
||||||
|
// obj.attr('src', src);
|
||||||
|
// var t = setTimeout(function(){
|
||||||
|
// var src = obj.attr('src')=="/images/lampa_animation.png"?"/images/lampa_active.gif":"images/lampa_active.png";
|
||||||
|
// obj.attr('src', src);
|
||||||
|
// window.location = obj.data('location');
|
||||||
|
// }, 3000);
|
||||||
|
// }
|
||||||
|
|
||||||
|
$(document).ready(onReadyDocument);
|
||||||
|
})(jQuery);
|
|
@ -0,0 +1,216 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: #000;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainContent {
|
||||||
|
background: url(../images/palinkafozo_hatter.jpg) no-repeat top center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1080px;
|
||||||
|
margin: 0 auto;
|
||||||
|
-webkit-background-size: 100%;
|
||||||
|
-moz-background-size: 100%;
|
||||||
|
-o-background-size: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head {
|
||||||
|
/*margin-top: 10px;*/
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headLeft {
|
||||||
|
background: url(../images/predikator_leparlo_logo.png) no-repeat center top;
|
||||||
|
width: 26.35%;
|
||||||
|
height: 247px;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
top: 10px;
|
||||||
|
left: 13px;
|
||||||
|
z-index: 2;
|
||||||
|
-webkit-background-size: 100%;
|
||||||
|
-moz-background-size: 100%;
|
||||||
|
-o-background-size: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headCenter {
|
||||||
|
background: url(../images/palinkafozo_fejlec.png) no-repeat center top;
|
||||||
|
width: 46.74%;
|
||||||
|
height: 144px;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
top: 5px;
|
||||||
|
z-index: 2;
|
||||||
|
-webkit-background-size: 100%;
|
||||||
|
-moz-background-size: 100%;
|
||||||
|
-o-background-size: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headRight {
|
||||||
|
background: url(../images/leparlo_menudisz.png) no-repeat center top;
|
||||||
|
width: 22.9%;
|
||||||
|
height: 99px;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
top: 25px;
|
||||||
|
z-index: 2;
|
||||||
|
left: 23px;
|
||||||
|
-webkit-background-size: 100%;
|
||||||
|
-moz-background-size: 100%;
|
||||||
|
-o-background-size: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentLeft {
|
||||||
|
background: url(../images/leparlokeszulek.jpg) no-repeat center top;
|
||||||
|
float: left;
|
||||||
|
width: 21.95%;
|
||||||
|
height: 341px;
|
||||||
|
position: relative;
|
||||||
|
top: -65px;
|
||||||
|
left: 90px;
|
||||||
|
z-index: 2;
|
||||||
|
-webkit-background-size: 100%;
|
||||||
|
-moz-background-size: 100%;
|
||||||
|
-o-background-size: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentCenter {
|
||||||
|
background: url(../images/palinkafozo_tartalom.jpg) no-repeat center top;
|
||||||
|
float: left;
|
||||||
|
width: 49.8%;
|
||||||
|
height: 517px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
top: -150px;
|
||||||
|
/*left: 25px;*/
|
||||||
|
left: 35px;
|
||||||
|
-webkit-background-size: 100%;
|
||||||
|
-moz-background-size: 100%;
|
||||||
|
-o-background-size: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentRight {
|
||||||
|
background: url(../images/leparlokeszulek_menu_hetter.jpg) no-repeat center top;
|
||||||
|
float: left;
|
||||||
|
width: 21.37%;
|
||||||
|
height: 342px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 101;
|
||||||
|
top: -121px;
|
||||||
|
left: 50px;
|
||||||
|
-webkit-background-size: 100%;
|
||||||
|
-moz-background-size: 100%;
|
||||||
|
-o-background-size: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentRight ul {
|
||||||
|
padding: 0;
|
||||||
|
margin-left: -5px;
|
||||||
|
list-style-type: none;
|
||||||
|
margin-top: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentRight ul li {
|
||||||
|
height: 35px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentRight ul li .lamp {
|
||||||
|
/*background: url(../images/lampa_inactive.png) no-repeat left top;*/
|
||||||
|
width: 86px;
|
||||||
|
height: 47px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentRight ul li:active .lamp {
|
||||||
|
/*background: url(../images/lampa_animation.gif) no-repeat left top;*/
|
||||||
|
width: 86px;
|
||||||
|
height: 47px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentRight ul li .menubg {
|
||||||
|
background: url(../images/menu.png) no-repeat left top;
|
||||||
|
width: 116px;
|
||||||
|
height: 47px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentRight ul li:hover .menubg {
|
||||||
|
background: url(../images/menu_hover.png) no-repeat left top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentRight ul li .gomb {
|
||||||
|
background: url(../images/gomb_inactive.png) no-repeat left center;
|
||||||
|
width: 20px;
|
||||||
|
height: 47px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentRight ul li .gomb.active {
|
||||||
|
background: url(../images/gomb_active.png) no-repeat left center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#beep-three {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fust {
|
||||||
|
display: none;
|
||||||
|
background: transparent;
|
||||||
|
/*background-size: 100%;*/
|
||||||
|
width: 257px;
|
||||||
|
height: 300px;
|
||||||
|
/* max-width: 1px;
|
||||||
|
max-height: 1px;*/
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.contentLeft {
|
||||||
|
top: -96px;
|
||||||
|
left: 69px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.contentLeft {
|
||||||
|
top: -112px;
|
||||||
|
left: 66px;
|
||||||
|
width: 21.6%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 370px) {
|
||||||
|
.contentLeft {
|
||||||
|
top: -183px;
|
||||||
|
left: 51px;
|
||||||
|
width: 20.3%;
|
||||||
|
}
|
||||||
|
.contentCenter {
|
||||||
|
top: -210px;
|
||||||
|
left: 33px;
|
||||||
|
}
|
||||||
|
.contentRight {
|
||||||
|
width: 14.5%;
|
||||||
|
top: -199px;
|
||||||
|
left: 37px;
|
||||||
|
}
|
||||||
|
.headRight {
|
||||||
|
width: 17.9%;
|
||||||
|
left: 26px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"name": "Hamori System",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"authors": [
|
||||||
|
"László Károlyi <laszlo@karolyi.hu>"
|
||||||
|
],
|
||||||
|
"description": "Predikator Leparlo",
|
||||||
|
"moduleType": [
|
||||||
|
"amd"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"tests"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"jquery": "~2.1.4"
|
||||||
|
}
|
||||||
|
}
|
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 31 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 86 KiB |
After Width: | Height: | Size: 414 KiB |
After Width: | Height: | Size: 213 KiB |
After Width: | Height: | Size: 92 KiB |
|
@ -0,0 +1,77 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script src="/assets/jquery-1.8.3.mini.js"></script>
|
||||||
|
|
||||||
|
<title>Prédikátor Lepárló</title>
|
||||||
|
<link href="/assets/main.css" rel="stylesheet" type="text/css">
|
||||||
|
<script type="text/javascript" src="/assets/app.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="mainContent" style="height: 778px;">
|
||||||
|
<div class="head">
|
||||||
|
<div class="headLeft"></div>
|
||||||
|
<div class="headCenter"></div>
|
||||||
|
<div class="headRight"></div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="contentLeft"></div>
|
||||||
|
|
||||||
|
<div class="contentCenter"></div>
|
||||||
|
|
||||||
|
<div class="contentRight">
|
||||||
|
<audio id="beep-three" preload="auto">
|
||||||
|
<source src="song/earcing.mp3" controls=""/>
|
||||||
|
Your browser isn't invited for super fun time.
|
||||||
|
</audio>
|
||||||
|
<ul id="menu-chooser">
|
||||||
|
<li data-menuid="1">
|
||||||
|
<div class="lamp">
|
||||||
|
<img src="/images/lampa_inactive.png" data-location="/">
|
||||||
|
</div>
|
||||||
|
<div class="menubg"></div>
|
||||||
|
<div class="gomb active"></div>
|
||||||
|
</li>
|
||||||
|
<li data-menuid="2">
|
||||||
|
<div class="lamp">
|
||||||
|
<img src="/images/lampa_active.png" data-location="/asd.html">
|
||||||
|
</div>
|
||||||
|
<div class="menubg"></div>
|
||||||
|
<div class="gomb"></div>
|
||||||
|
</li>
|
||||||
|
<li data-menuid="3">
|
||||||
|
<div class="lamp">
|
||||||
|
<img src="/images/lampa_inactive.png" data-location="/asd.html">
|
||||||
|
</div>
|
||||||
|
<div class="menubg"></div>
|
||||||
|
<div class="gomb"></div>
|
||||||
|
</li>
|
||||||
|
<li data-menuid="4">
|
||||||
|
<div class="lamp">
|
||||||
|
<img src="/images/lampa_inactive.png" data-location="/asd.html">
|
||||||
|
</div>
|
||||||
|
<div class="menubg"></div>
|
||||||
|
<div class="gomb"></div>
|
||||||
|
</li>
|
||||||
|
<li data-menuid="5">
|
||||||
|
<div class="lamp">
|
||||||
|
<img src="/images/lampa_inactive.png" data-location="/asd.html">
|
||||||
|
</div>
|
||||||
|
<div class="menubg"></div>
|
||||||
|
<div class="gomb"></div>
|
||||||
|
</li>
|
||||||
|
<li data-menuid="6">
|
||||||
|
<div class="lamp">
|
||||||
|
<img src="/images/lampa_inactive.png" data-location="/asd.html">
|
||||||
|
</div>
|
||||||
|
<div class="menubg"></div>
|
||||||
|
<div class="gomb"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|