Initial commit

.gitignore

@@ -0,0 +1 @@
+bower_components

assets/app.js

@@ -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);

assets/main.css

@@ -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;
+    }
+}

bower.json

@@ -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"
+  }
+}

index.html

@@ -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>